<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/common/common.css" />
		<link rel="stylesheet" href="../../css/bookdetails/comment.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">评分</h1>
		</header>
		<div class="mui-content">
			<div class="score">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<span>0分</span>
			</div>
			<div>
				<div class="textarea">
					<textarea name="" id="" cols="30" rows="10" maxlength="500"></textarea>
					<div class="words">
						<div>500</div>/500
					</div>
				</div>
			</div>
			<button type="button" class="mui-btn mui-btn-success submit">提交</button>
		</div>
		<script src="../../js/libs/mui.min.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script type="text/javascript">
			mui.init()
			var num = $(".words div").text()
			$(".score div").on("tap", function() {
				$(".score div").removeClass("starnumber")
				for(var i = 0; i < $(this).index() + 1; i++) {
					$(".score div").eq(i).addClass("starnumber")
				}
				$(".score span").text($(this).index() + 1 + "分")
				$(".score span").css("color","#ffbc01")
			})
			$(".textarea textarea").on("keyup", function() {
				$(".words div").text(num - $(".textarea textarea").val().length)
			})
			var oldback = mui.back;
			mui.back = function() {
				oldback();
				//恢复a页面的显示状态；
				mui.currentWebview.opener().show('none');
				//继续执行b页面原有的返回逻辑
			}
			$(".submit").on("tap",function(){
				mui.back()
			})
		</script>
	</body>

</html>